<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            .a{
            height: 497px;
            background: url("2.jpg");
        }
        .b{
            height: 378px;
            width: 968px;
            margin: 48px auto 27px;
        }
        .c{
            height: 50px;
            width: 968px;
            margin:auto;
            font-size: 13px;
        }
        .a1{
            width: 968px;
            height: 75px;
            margin: 0px auto;
        }
        .a1 h1{
            float: left;
        }
        .a1 ul{
            float:right;
        }
        .a1 img{
            width: 129px;
            height: 44px;
            margin: 14px 0px 0px;
        }
        .a1 a{
            font-size: 14px;
            text-decoration: none;
            color:#fff;
        }
        .a1 li{
            float :left;
            margin-right: 8px;
            margin-top: 17px;
            padding: 10px;
        }
        .a1 li:hover{
            background:black;
            border-radius: 30px;
        }
        .a3{
            height: 424px;
            width: 968px;
            margin: auto;
        }
        .a3 h2{
            background-image: none;
            font-size: 26px;
            font-weight: 400;
            position: static;
            padding: 45px 0px 20px;
        }
        .a3 li{
            color:slategrey;
            margin: 0px 0px 15px;
            font-size: 15px;
        }
        .a3 a{
            text-decoration: none;
            color:green;
            cursor: pointer;
            outline: none;
        }
        .b2 a:hover{
            color: purple;
            text-decoration:underline ;
        }
        .a3 img{
            padding: 5px 0px 20px;
        }
        .a4{
            float: left;
        }
        .a5{
            margin: 20px 0px 0px 5px;
            float: right;
        }
        .a5 p{
            margin: 0px 0px 1px 130px ;
        }
        .a5 h3{
            margin: 0px 0px 0px 175px ;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        .b3 ul{
            float: left;
        }
        .b3 h4{
            padding: 6px 0px;
            font-size: 14px;
        }
        .b3 h5{
            font-size: 14px;
            padding: 6px 60px 0px 0px;
        }
        .b3 li{
            color:slategrey;
            font-size: 14px;
            padding: 4.6px 80px 5px 0px ;
        }
        .b3 a{
            text-decoration: none;
            color:green;
            cursor: pointer;
            outline: none;
        }
        .b3 a:hover{
            color: purple;
            text-decoration:underline ;
        }
        .b3{
            float: left;
        }
        .b1{
            float:right;
        }
        .b1 ul{
            font-size: 14px;
        }
        .b1 li{
            margin: 20px 0px;
        }
        .b1 a{
            text-decoration: none;
            color: green;
            cursor: pointer;
            outline: none;
        }
        .b1 a:hover{
            color: purple;
            text-decoration:underline ;
        }
        .c1{
            float:left;
        }
        .c2{
            float: right;
        }
        .c1 li{
            float:left;
            margin: 10px 10px 10px 0px;
        }
        .c1 p{
            margin-bottom: 10px;
            font-size: 12px;
            color: slategray;
        }
        .c1 a{
            text-decoration: none;
            color: slategray;
            cursor: pointer;
            outline: none;
        }
        .c1 a:hover{
            color: slategray;
            text-decoration:underline ;
        }
        .c2 li{
            float: right;
            margin: 10px 10px 10px 0px;
        }
        .c2 a{
            text-decoration: none;
            color:slategray;
            cursor: pointer;
            outline: none;
        }
        .c2 a:hover{
            color:slategray;
            text-decoration:underline ;
        }
        </style>
    </head>
    <body>
        <div class="a">
            <div class="a1">
                <h1>
                    <a href="">
                        <img src="1.png" alt="">
                    </a>
                </h1>
                <ul>
                    <li>
                        <a href="">首页</a>
                    </li>
                    <li>
                        <a href="">帮助与反馈</a>
                    </li>
                    <li>
                        <a href="">公众平台</a>
                    </li>
                    <li>
                        <a href="">开放平台</a>
                    </li>
                    <li>
                        <a href="">微信支付</a>
                    </li>
                    <li>
                        <a href="">微信广告</a>
                    </li>
                    <li>
                        <a href="">企业微信</a>
                    </li>
                    <li>
                        <a href="">表情开放平台</a>
                    </li>
                    <li>
                        <a href="">微信网页版</a>
                    </li>
                </ul>
            </div>
            <div class="a2">
                <div class="a3">
                    <div class="a4">
                        <h2>
                            微信，是一个生活方式
                        </h2>
                        <ul>
                            <li>
                                超过十亿人使用的手机应用
                            </li>
                            <li>
                                支持发送语音短信、视频、图片和文字
                            </li>
                            <li>
                                可以群聊，仅耗少量流量，适合大部分智能手机
                            </li>
                            <a href="">
                                <img src="3.png" alt="">
                            </a>
                            <li>
                                <span>
                                    <a href="">忘记了微信账号或密码？</a>
                                </span>
                            </li>
                            <li>
                                <span>
                                    <a href="">自助解除登录或功能限制</a>
                                </span>
                            </li>
                            <li>
                                <span>
                                    <a href="">冻结或解冻微信账号</a>
                                </span>
                            </li>
                        </ul>
                    </div>
                    <div class="a5">
                        <a href="">
                            <img src="4.png" alt="">
                        </a>                  
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="b">
            <div class="b1">
                <ul>
                    <h4>最新消息</h4>
                    <li>
                        <a href="">微信 8.0.2 for Android 全新发布<span style="color: red;">(New)</span></a>
                    </li>
                    <li>
                        <a href="">微信 3.2.1 for Windows 全新发布<span style="color: red;">(New)</span></a>
                    </li>
                    <li>
                        <a href="">微信 8.0.2 for iOS 全新发布<span style="color: red;">(New)</span></a>
                    </li>
                    <li>
                        <a href="">微信 2.6.1 for Mac 全新发布<span style="color: red;">(New)</span></a>
                    </li>
                    <li>
                        <a href="">关于部分 iOS 9 用户无法更新微信<span style="color: red;">(New)</span></a>
                    </li>
                    <li>
                        <a href="">微信外部链接内容管理规范</a>
                    </li>
                    <li>
                        <a href="">微信网页版2.1版本发布 全新发布</a>
                    </li>
                    <li>
                        <a href="">微信表情平台全新开放</a>
                    </li>
                </ul>
            </div>
            <div class="b2">
                <a href="">
                    <img src="5.png" alt="">
                </a>
                <div class="b3">
                    <ul>
                        <h4>微信网页版</h4>
                        <li>
                            扫一扫二维码
                        </li>
                        <li>
                            就能在浏览器上使用微信
                        </li>
                    <a href="">了解更多</a>
                    </ul>
                    <ul>
                        <h5>微信 Mac 版</h5>
                        <li>
                            极致简洁，迅捷沟通
                        </li>
                    <a href="">了解更多</a>
                    </ul>
                    <ul>
                        <h5>微信 Windows 版</h5>
                        <li>
                            让沟通更方便
                        </li>
                    <a href="">了解更多</a>
                    </ul>
                </div>
            </div>
        </div>
        <div class="c">
            <hr>
            <div class="c1">
                <ul>
                    <li>
                        <a href="">关于腾讯</a>
                    </li>
                    <li>
                        <a href="">服务条款</a>
                    </li>
                    <li>
                        <a href="">使用规范</a>
                    </li>
                    <li>
                        <a href="">客服中心</a>
                    </li>
                    <li>
                        <a href="">隐私保护指引</a>
                    </li>
                </ul>
                <p>© 1998 - 2021 Tencent Inc. All Rights Reserved</p>
            </div>
            <div class="c2">
                <ul>
                    <li>
                        <a href="">
                            简体中文
                        </a>
                    </li>
                    <li>
                        <a href="">
                            繁體中文
                        </a>
                    </li>
                    <li>
                        <a href="">
                            English
                        </a>
                    </li>  
                </ul>
            </div>
        </div>
    </body>
</html>